<template>
  <div class='my-table'>
    <el-table class="auto-height" ref="my_table" :data="listData" style="width:100%" @selection-change="handleSelectionChange" :max-height="height">
      <el-table-column v-for="(item,index) in getModelData" v-if="item.myType=='index'" :key="index" align="center" width="80" type="index" :label="item.label"></el-table-column>
      <el-table-column v-else-if="item.myType=='select'" align="center" type="selection" width="60"></el-table-column>
      <el-table-column v-else-if="item.myType=='normal'" align="center" :key="index" :label="item.label" :prop="item.prop"></el-table-column>

      <!-- img -->
      <el-table-column v-else-if="item.myType=='img'" align="center" :key="index" :label="item.label" :prop="item.prop">
        <template slot-scope="scope">
          <img class="table-pic" :src="scope.row.img" alt="pic">
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column v-else-if="item.myType=='operate'" align="center" :key="index" :label="item.label" :prop="item.prop" :width="item.width">
        <template slot-scope="scope">
          <div class="table-btns">
            <span class="btn-item hover" v-for="(opt,optIndex) in item.btns" :key="optIndex" @click="opt.click(scope)" :title="opt.label">
              <img :src="opt.icon" alt="icon" class="btn-icon">
              <span>{{opt.label}}</span>
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="my-page" v-if="listData.length>0&&pageInfo">
      <el-pagination background layout="prev, pager, next" :current-page="pageInfo.page | toNumber" :total="pageInfo.total | toNumber" :page-size="pageInfo.size | toNumber" @current-change="pageInfo.changePage"></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  props: ["modelData", "listData", "pageInfo"],
  components: {},
  name: "",
  data() {
    return {
      settime: null,
      height: 0
    };
  },
  computed: {
    getModelData() {
      return this.modelData;
    },
  },
  filters: {
    toNumber(val) {
      return parseInt(val);
    }
  },
  methods: {
    handleSelectionChange() {
      console.log("change-select");
    },
    getHeight() {
      var path =_g.getRouterPath(this);
      if (path.indexOf("/manageMeetings/") > -1) {
        setTimeout(()=>{
          this.height = document.querySelector(".normal-tab").clientHeight - (document.querySelector("body").clientWidth>1370?240:230);
        },100)
      }else if(path.indexOf("/manageRoles/") > -1||path.indexOf("/questions/manages") > -1){
        setTimeout(()=>{
          this.height = document.querySelector(".normal-tab").clientHeight - 72-40;
        },100)
      }
      else{
        // 这个没有问题自动响应
        setTimeout(()=>{
          // console.log(document.querySelector(".normal-tab").clientHeight)
          this.height = document.querySelector(".table-box").clientHeight - 72
        },100)
      }
    }
  },
  created() {
    this.getHeight()
  },
  mounted(){
    
  },
  beforeDestroy() {
    clearInterval(this.settime);
  }
};
</script>
<style lang="scss" scoped>
.my-table {
  height: 50%;
  min-height: 300px;
  flex-grow: 1;

  .table-pic {
    height: 100px;
    margin: 0 auto;
  }
  .my-page {
    text-align: center;
    padding: 20px 0;
    background-color: #fff;
  }
  .table-btns {
    display: flex;
    justify-content: space-around;

    .btn-item {
      display: flex;
      line-height: 28px;

      img {
        width: 28px;
        height: 28px;
        margin-right: 8px;
      }
    }
  }
}
</style>